<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import HeaderBanner from './modules/header-banner.vue';
import CardData from './modules/card-data.vue';
import InfoPanel from './modules/info-panel.vue';

const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
  <el-space direction="vertical" fill class="full-space pb-0" :size="0">
    <HeaderBanner class="mb-16px" />
    <CardData class="mb-16px" />
    <InfoPanel :gap="gap" />
  </el-space>
</template>

<style scoped>
.full-space {
  > :deep(.el-space__item) {
    width: 100%;
  }
}
</style> 